@charset "utf-8";
/* CSS Document */
*{
    margin:0;
    padding:0;
}
body{
    font-family: "微软雅黑";
    /* background-color:#ddd; */
}
.box{
    width:1200px;
    height:600px;
    background:#fff;
    margin:30px auto;
    /*padding:20px;*/
}
.box .head span{
    font-size:18px;
    color:#333;
}
.box .head{
    margin-bottom:20px;
}
.box .head a{
    text-decoration:none;
    float:right;
    font-size:25px;
    color:#333;
}
.box .head a:hover{
    color:#F00;
}
.box ul li{
    width:280px;
    height:180px;
    list-style:none;
    position:relative;
    float:left;
    margin-left:20px;
    margin-bottom:20px;
    overflow:hidden;
}
.box ul li .deatil{
    width:280px;
    height:180px;
    background:rgba(0,0,0,0.7);
    position:absolute;
    top:-280px;
    /* 适应ie，谷歌，苹果浏览器内核 */
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    /* <!--适应Opera浏览器内核--> */
    -moz-transition:all 0.3s ease;
    /* <!--火狐浏览器--> */
    -ms-transition:all 0.3s ease;
    /* <!--微软--> */
}

.box ul li .deatil h3{
    font-size:8px;
    color:#fff;
    text-align:center;
    /*padding-top:10px;*/
    }
.box ul li .deatil p{
    font-size:12px;
    /*text-align:center;*/
    margin:3px;
    color:#fff;
}
.box ul li .deatil a{
    font-size:12px;
    display:block;
    color:#fff;
    background-color:rgb(218, 64, 64);
    text-decoration:none;
    width:80px;
    height:30px;
    text-align:center;
    line-height:30px;
    margin:0 auto;
}
.box ul li:hover .deatil{
    top:0;
}



